<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>年会抽奖</title>
		<style>
			.wrapper {
				width: 840px;
				height: 420px;
				background: url(../images/20241108/bg01.jpg) no-repeat center /
					cover;
				padding: 100px 250px;
				box-sizing: border-box;
			}
		</style>
	</head>

	<body>
		<div class="wrapper">
			<strong>班级打扫除大抽奖</strong>
			<h1>一等奖：<span id="one">???</span></h1>
			<h3>二等奖：<span id="two">???</span></h3>
			<h5>三等奖：<span id="three">???</span></h5>
		</div>
		<script>
			// 1.声明数组
			let studentNames = [
				"叶俊杰",
				"徐飞祥",
				"凡光乐",
				"干纯欣",
				"陈启",
				"江智杰",
				"刘志强",
				"林晗希",
				"江贤榕",
				"吴智峰",
				"陈晓东",
				"关松涛",
				"罗周熠",
				"彭永盛",
				"叶功照",
				"肖志华",
				"廖泰玮",
				"卢鑫杰",
				"曾佳炜",
				"谢伟煌",
				"游乙麟",
				"陈智宏",
				"邱炜晨",
				"卢比伦",
				"余涛",
				"乐吉佳",
				"陈文琳",
				"游嘉豪",
				"肖飞鹏",
				"郭小燕",
				"柳岚森",
				"王显义",
				"王旋",
				"宋嘉豪",
				"宋凯",
				"吴佳宇",
				"韦力莉",
				"吴威霆",
				"苏鹊权",
				"黄宁",
				"林志万",
				"孙先优",
				"蔡玮铭",
				"陈俊杰",
				"刘文辉",
			];
			// 2. 先做一等奖
			// 2.1 随机数 数组的下标
			let index = randomIndex(studentNames);
			// 2.2 获取one 元素
			let oneEle = document.querySelector("#one");
			// 2.3 把名字给 one
			oneEle.innerText = studentNames[index];
			// 2.4 删除数组这个名字
			studentNames.splice(index, 1);

			//  二等奖
			index = randomIndex(studentNames);
			let twoEle = document.querySelector("#two");
			twoEle.innerText = studentNames[index];
			studentNames.splice(index, 1);

			// 三等奖
			index = randomIndex(studentNames);
			let threeEle = document.querySelector("#three");
			threeEle.innerText = studentNames[index];
			studentNames.splice(index, 1);

			function randomIndex(arr = []) {
				return Math.floor(Math.random() * arr.length);
			}
		</script>
	</body>
</html>
